<template>
  <div style="padding: 10px 20px;height: auto; ">
    <h1 style="font-size: 24px;">审批限制</h1>
    <div style="width: 50%;height: 100vh;margin: auto;">
      <el-card>
        <div style="margin-bottom: 20px;">
          <span style="display: inline-flex;">请选择审批人：</span>
          <el-select v-model="query.dep_id" placeholder="请选择部门" style="width: 240px;margin-bottom: 10px;" @change="get_pos_list">
            <el-option v-for="item in dep_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <el-checkbox-group v-model="query.pos_id" style="width: 240px;">
          <div v-for="item in pos_list" :key="item.id" style="margin-bottom: 10px;">
            <el-checkbox :value="item.id">{{ item.name }}</el-checkbox>
            <el-radio-group v-model="query.pos_level[item.id]" style="width: 500px;display: flex;">
              <el-radio v-for="level in approve_person" :key="level" :value="level.id" >{{ level.name }}</el-radio>
            </el-radio-group>
            <el-button @click="clearSelection(item)">取消选择</el-button>
          </div>
        </el-checkbox-group>

        <div>
          <!-- 提交 -->
          <el-button type="primary" @click="onSubmit_data">提交</el-button>
          <!-- 取消职位和职级 -->
          <el-button @click="clearPositionAndLevel">取消职位和职级</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import http from "../../http"
import {onMounted, ref} from 'vue'
import {ElMessage} from "element-plus";
import router from "../../router";

const workflow_data = JSON.parse(localStorage.getItem('data'));
console.log(workflow_data);

const approve_person = ref([{"name": "第一审批人", "id": 1}, {"name": "第二审批人", "id": 2}, {
  "name": "第三审批人",
  "id": 3
}]);

const query = ref({
  dep_id: '',
  pos_id: [], // 修改为数组
  pos_level: {}, // 新增字段，用于存储每个职位对应的职级选择
  workflow_data: workflow_data,
});
const dep_list = ref([]);
const pos_list = ref([]);

const get_dep_list = () => {
  http.get(`app/dep/`)
      .then(res => {
        console.log(res.data);
        dep_list.value = res.data;
      });
};

const get_pos_list = () => {
  console.log(query.value.dep_id);
  http.post(`app/pos/get_dep_position/`, {dep_id: query.value.dep_id})
      .then(res => {
        console.log(res.data);
        pos_list.value = res.data.data;
      });
};

const hasDuplicateLevels = (levels) => {
  const values = Object.values(levels);
  const uniqueValues = new Set(values);
  return values.length !== uniqueValues.size;
};

const isPosLevelComplete = () => {
  for (const posId of query.value.pos_id) {
    if (!query.value.pos_level[posId]) {
      return false;
    }
  }
  for (const posId in query.value.pos_level) {
    if (!query.value.pos_id.includes(Number(posId))) {
      return false;
    }
  }
  return true;
};

const onSubmit_data = () => {
  console.log(query.value);
  if (query.value.dep_id === '' || query.value.pos_id.length === 0 || Object.keys(query.value.pos_level).length === 0) {
    ElMessage.error('请选择部门、职位和职级');
  } else if (!isPosLevelComplete()) {
    ElMessage.warning('选择了职位就必须选择职级，选择了职级就必须选择职位');
  } else if (hasDuplicateLevels(query.value.pos_level)) {
    ElMessage.warning('同一个审批级别只能包括一个审批人，请重新选择');
  } else {
    http.post(`app/node/add_node/`, query.value).then(res => {
      console.log(res.data);
      ElMessage.success("添加成功");
      router.push("/check_work")
    });
  }
};

const clearSelection = (item) => {
  // 清除对应职位的选中状态
  query.value.pos_id = query.value.pos_id.filter(id => id !== item.id);
  // 清除对应职位的职级选择
  delete query.value.pos_level[item.id];
};

const clearPositionAndLevel = () => {
  query.value.pos_id = [];
  query.value.pos_level = {};
};

onMounted(() => {
  get_dep_list();
});
</script>

<style>
/* 你可以在这里添加样式 */
</style>
